<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- 第一类   竖向合并 -->
      <el-tab-pane label="竖向合并" name="1">
        <verticaltable></verticaltable>
      </el-tab-pane>
      <!-- 第二类  横向合并 -->
      <el-tab-pane label="横向合并" name="2"> 
        <horizontaltable></horizontaltable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import verticaltable from "./components/verticaltable.vue";
import horizontaltable from "./components/horizontaltable.vue";
export default {
  name: "User",
  components: {
    verticaltable,
    horizontaltable,
  },
  data() {
    return {
      activeName: "1",
      activeNum: "1",
    };
  },

  methods: {
    handleClick(tab, event) {
      this.activeNum = tab.name;
    },
  },
};
</script>
<style >
</style>